<template>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="服务商" name="first">
      <el-card class="box-card">
        <div>
          <!-- 搜索头 -->
          <p>
            <span class="span1"> 账期: </span>
<!--            <el-select v-model="billDate">-->
<!--              <el-option label="全部" value=""></el-option>-->
<!--              <el-option v-for="item in listOptData" :label="item.billDate" :value="item.billDate"></el-option>-->
<!--            </el-select>-->
            <span class="span1"> 支付状态: </span>
            <el-select v-model="billType">
              <el-option value="" label="全部"></el-option>
              <el-option value="1" label="未支付"></el-option>
              <el-option value="2" label="已支付"></el-option>
            </el-select>
            <el-button @click="listPayMent"  icon="el-icon-search"></el-button>
          </p>
          <!-- 搜索头 -->
          <el-row :span="19" type="flex">
            <el-col>
              <el-table
                  :data="listData"
                  style="width: 100%;height:650px">
                <el-table-column
                    label="结算账期"
                    width="160">
                  <template slot-scope="scope">
                    <span class="outPutSpan" @click="openPayMentByDateWindow(scope.row)">{{scope.row.billDate}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                  <template slot-scope="scope">
                    <span class="outPutSpan">下载明细</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- 分页开始 -->
          <div class="block" style="margin-top: 20px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size=pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
          </div>
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      pageSize: 5,
      total: 0,
      pageNum: 1,
      currentPage: 0,
    }
  },
  mounted(data) {
    this.listPayMent()
  },
  methods: {
    handleClick(tab, event) {
    },
    myMessage (type, message) { // 弹窗提示
      this.$message({
        message: message,
        type: type
      })
    },
    handleSizeChange (val) { // 页码
      this.pageSize = val
      this.listPayMent()
    },
    handleCurrentChange (val) { // 页数
      this.pageNum = val
      this.listPayMent()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style>
.outPutSpan{
  color: blue;
  cursor: pointer;
}
.span1{
  font-size: 10px;
}
.span2{
  font-size: 10px;
  margin-left: 100px;
}
</style>
